ルール: 各イメージビューア・オプションの最後にはセミコロン「
;」を打ちます。
下の例では「rightToLeft」(画像を右から左へ配置)と「ascendingOrder」(画像を昇順で読み込む)というオプションが設定されています。
rightToLeft;ascendingOrder;
ルール: イメージビューア・オプションは
左から右へと解釈され、先に読まれる設定は後に読まれる設定で打ち消されます。
下の例では「rightToLeft」(右から左へ)という設定が後に出現する「leftToRight」(左から右へ)という設定に置き換わります。
rightToLeft;leftToRight;
ルール: イメージビューア・オプションは HTMLにて「listoption」 クラス(全ページグローバル、単ページグローバル設定用)及び「listoption」クラス(個々のListItemBaseでの設定用)を使って設定できます。
設定は
上位の位置にあるものから下位の位置にあるものへと解釈され、上位の位置にある設定は下位の位置にある設定で打ち消す事ができます。
下の例では最上位の設定が後にそれより下位に出現する設定によって次々と置き換わります。
「index.html」の「divDocHeader」クラスで設定される:
<div class="listoption" myname="addImageViewer" myvalue="righttoleft"></div>
は、その下位にある、「ListItemBase」が書かれている「top.html」にて設定される:
<div class="listoption" myname="addImageViewer" myvalue="lefttoright"></div>
に置き換わり、更にその設定は、その下位にある「ListItemBase」クラスにて設定される:
<div class="listoption" myname="addImageViewer" myvalue="righttoleft"></div>
によって置き換わる
つまり設定は、「rightToLeft」→「leftToRight」→「rightToLeft」と次々置き換わっていき、最終的には最後に出現する「rightToLeft」が有効値として受け取られます。
これらの流れはイメージビューアのヘッダー部に書かれる情報で確認する事ができます:
[Viewer options] addTags;addIndex;colOptions=5;leftToRight;rightToLeft;hideOnError;rightToLeft;useDividedWidth;cols=3;viewerTitle=Test;visibilityCheckDelay=1000;defaultImageSrc=images/default.jpg
下はグローバル設定用に使われる「listoption」の例です:
<div class="listoption" myname="addImageViewer" myvalue='imageSizeOption=fitHeight;cols=2;padding=5;righttoleft;hideonerror;imageselection=selection'></div>
ルール: イメージビューア・オプションのうち幾つかについて、それらのデフォルト値は設定ファイル、例えば「settings/settings.html」によって決定されます。
イメージビューア・オプション一覧:
使うイメージビューアの種類:
オプション文字列「pageiv;iv;popupiv;」を書き込む場所は、「設定」の「画像ビューア+の為のオプション ボックスを表示する。」項目にチェックを入れる事でリストアイテムに表示される入力ボックス、
同「設定」の「イメージビューアのデフォルトのオプション」項目、または検索結果アイテムの入力ボックスです。
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
pageIV|PageImageViewer|
新規タブを作るイメージビューアではなくそのページで見るビューアを使います。
PCであればAltKey + 「V+」ボタンで開きます。
タッチパネル操作の場合はAltKeyの代わりに「V+」ボタンを3秒以上長押します。
ivスイッチを確実に打ち消したい場合にも使用し、この結果として以降に続く関連操作で「pageIVがデフォルト」とスクリプトに認識させられます。
|スイッチ||IV|pageiv;
IV|ImageViewer|
初期からある、新規タブを作って開くタイプのイメージビューアを使います。
ただし、モダンなWebブラウザは選択状態にないタブを休止状態にする流れにあり、このタイプのイメージビューアが普通に動作を続ける事はまれになりました。
PCの場合今もこれがデフォルト値ですが、まともに動かない場合はpageIVオプションを設定してページイメージビューアをデフォルトにして下さい。
PCの場合、かつ「iv」がデフォルト値の場合、かつページイメージ・ビューアを使いたい場合は、AltKeyを押しながら「V+」ボタンを押します。
タッチパネル操作の場合はAltKeyの代わりに「V+」ボタンを3秒以上長押します。
pageivスイッチを確実に打ち消したい場合にも使用し、この結果として以降に続く関連操作で「IVがデフォルト」とスクリプトに認識させられます。
|スイッチ||pageIV|iv;
popupIV|PopupImageViewer|
ポップアップで対象画像や動画を開きます。
このスイッチがIVやpageIVスイッチを打ち消す事はありませんが、優先されます。
「pageIV」や「IV」オプションとは異なり、このオプションで開けるのは画像や動画1つだけ、画像や動画のグループを開いた場合先頭のもの1つだけです。
|スイッチ|||popupiv;
画像サイズ関連のオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
fitheight|Fit Height|各画像の高さをウインドウの高さに合わせます|スイッチ||他全ての画像サイズオプション|fitheight;
fitwidth|Fit Width|各画像の幅をウインドウの幅に合わせます|スイッチ||他全ての画像サイズオプション|fitwidth;
usedividedwidth|Use Divided-Width|各画像の幅をウインドウの幅を列数で割った数値にします|スイッチ|usedividedwidth|他全ての画像サイズオプション|usedividedwidth;
originalsize|Original Size|サイズ変更はしません。 各画像はそれら本来のサイズで表示されます|スイッチ||他全ての画像サイズオプション|originalsize;
thumbnail|Thumbnail|各画像を一覧できるような小さなサイズに変更します|スイッチ||他全ての画像サイズオプション|thumbnail;
fixedwidth|Fixed Width|ページ・イメージビューアのウインドウ幅を固定します|px値||0より大きい値を与えればfitwidthとfitheightより優先します|fixedWidth=960;
配置、表示、外観関連のオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
cols|Columns|画像を並べる横方向の列数を設定します|数値|3||cols=2;
hideonerror|Hide When Error|画像のロード時にエラーが発生した場合、その画像を不可視にします|真偽値|false||hideonerror=true;
ascendingorder|Ascending order|画像を昇順で読み込む。(実際にはこのオプションによって何かをキーにソートすることはなく、画像ロード用の配列に入ったデータを順に読み込むだけです。)|スイッチ|ascendingorder|descendingorder|ascendingorder;
descendingorder|Descending order|画像を降順で読み込む(実際にはこのオプションによって何かをキーにソートすることはなく、画像ロード用の配列に入ったデータを逆順に読み込むだけです。)|スイッチ||ascendingorder|descendingorder;
lefttoright|Left to Right|画像を左方向から右方向へ向かって配置します|スイッチ|lefttoright|righttoleft|lefttoright;
righttoleft|Right to Left|画像を右方向から左方向へ向かって配置します|スイッチ||lefttoright|righttoleft;
firstfilename|First File Name|画像の列数が複数の場合にのみ有効です。 設定されたファイル名が出現した場合にその画像を列の先頭に配置します。|文字列|||firstfilename=image05.jpg;
addindex|Add Index|画像上にインデックス番号を表示します。 インデックス番号は画像リストの前方から開始します。|真偽値|false|addindexfromtail|addindex=true;
addindexfromtail|Add Index from Tail|画像上にインデックス番号を表示します。 インデックス番号は画像リストの後方から開始します。|真偽値|false|addindex|addindexfromtail=true;
addtag|Add Tag|画像上にTag を表示します|真偽値|false||addtag=true;
addfilename|Add File Name|ソースパスからユニークなファイル名を生成して画像上にそれを表示します。addfilename > 0でsuppressimagetitleonmouseoverのデフォルト値が自動でtrueなります。|数値|0|
|画像へのパスが「/dir1/dir2/file01.jpg」の場合、「addfilename=1;」とすると「file01.jpg」が、「addfilename=2;」とすると「dir2/file01.jpg」が表示されます。
arrReplaceNumberWithZero|array Replace Number With Zero|addfilenameで生成されるユニークなファイル名に数字要素があるとき、そのそれぞれに対するゼロ埋めルールを指定します。|配列|||
例えばaddfilenameで生成されるファイル名が1_image1.jpgから10_image100.jpgまで変動するとき、arrReplaceNumberWithZero=2,3;オプションを追加すると1番目の数字要素[1]_image1.jpgに対して0埋め2、2番目の数字要素1_image[1].jpgに対して0埋め3
を指定する事になり、それによって生成されるファイル名は01_image001.jpgから10_image100.jpgになります。
cellpadding|CellPadding|各画像間の隙間を設定します|数値|0||cellpadding=10;
padding|Padding|cellpaddingに同じ|数値|0||padding=10;
suppressimagetitleonmouseover|Suppress Image Title on Mouseover|画像上にマウスを置いた時にその画像の情報を含むツールチップが表示されるのを抑制します|真偽値|false||suppressimagetitleonmouseover=true;
パフォーマンスに大きく影響するオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
loadimageswhenvisible|Load images when visible|画像が可視位置にあると見なされた事を条件に内容をロードします|真偽値|設定ファイルによる||loadimageswhenvisible=true;
takeupperimagesasvisible|Take upper Images as Visible|ウインドウがスクロールされている時、現在見えている画像より上方にある画像を全て「見えている」とみなします|真偽値|設定ファイルによる||takeupperimagesasvisible;
maximages|Max Images|イメージビューアにロードする画像の最大数を設定します。これにより望まない量の画像がイメージビューアにロードされるのを避けます。|数値|1000||maximages=100;
visiblethreshold|Visible Threshold|各画像を「見えている」と判断する時のあそび値(px)を設定します|数字|設定ファイルによる||visiblethreshold=2400;
visibilitycheckdelay|Visibility Check Delay|ウインドウの内容更新に関わるイベントを受け取ってから、画像の可視チェックを実行するまでの遅延時間(msec)を設定します。
この可視チェックは例えばスクロールバーの操作を終えてから設定された時間が経過した後に実行されます。待ち時間中にスクロールバーが再び操作された場合にはそれまでの経過時間はリセットされます。
|数値|設定ファイルによる||visibilitycheckdelay=500;
リストアイテムのイメージビューアパーツを生成する際に適用されるオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
coloptions|Column Options|アイテム付属イメージビューアの列数オプションメニューについて、選択できる項目を追加します|文字列|||coloptions=8|5;
imagesizeoption|Image Size Option
|アイテム付属イメージビューアのサイズオプションメニューについて、初期値として選択される項目を設定します。
設定可能な値:fitheight, fitwidth, usedividedwidth, originalsize, thumbnail
各値の内容については「画像サイズ関連のオプション」を参照して下さい。
|文字列|usedividedwidth||imagesizeoption=fitheight;
imageselection|Image Selection
|アイテム付属イメージビューアの画像グループ選択オプションメニューについて、初期値として選択される項目を設定します。
|文字列|all||imageselection=~selection;
selectedtotalcols|Selected Total Cols
|アイテム付属イメージビューアの画像表示列数選択オプションメニューについて、初期値として選択される列数を設定します。
|数値|3||selectedtotalcols=1;
内部使用のもの、その他のオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
defaultimagesrc|Default Image Src|画像がロードされていないときに使う画像のソースを設定します|文字列|設定ファイルによる|他全ての画像サイズオプション|defaultimagesrc=images/default.jpg;
usectrlkeyfordragscroll|Use Ctrl Key for Drag-Scroll|画像をドラッグすることでウインドウをスクロールさせる機能を使うとき(及び画像のズームに)、Ctrlキーが押されている事を必須条件とします|真偽値|false||usectrlkeyfordragscroll;
imagetypes|Image Types|イメージビューアで受け入れる画像のタイプを設定します|文字列|jpg, jpeg, png, gif||imagetypes=jpg|jpeg|png;
viewertitle|Viewer Title|イメージビューアのタイトルバーに入れる文字を設定します|文字列|ImageViewer||viewertitle=Test;
replace|Replace|画像ソースの文字列を置き換えます。大文字小文字を区別します。|文字列|||(文字列「.jpg」を文字列「.jpg,」に置き換える例)replace=.jpg*with*.jpg,;
indexcolor|Index Color|画像のインデックスなど画像に添えて表示される文字の色を指定します|文字列|||indexcolor=black;
indexbackgroundcolor|Index Background Color|画像のインデックスなど画像に添えて表示される文字枠の背景色を指定します|文字列|transparent||indexbackgroundcolor=white;
emphasizedtextcolor|Emphasized Text Color|カッコ「[」と、「]」で囲われた文字列は強調表示されますが、その強調表示される文字列の色を設定します|文字列|||emphasizedtextcolor=green;
showproperty|Show property|イメージビューアの個々の画像に対して生成されるオブジェクトのプロパティ値を表示します。プロパティー名の表示付きです。|文字列|||showproperty=path;
showattribute|Show attribute|イメージビューアの画像がTooltipクラスのエレメントから成る場合に、そのエレメントの属性値を表示します。属性名の表示付きです。|文字列|||showattribute=keywords;
showproperty|Show property value|イメージビューアの個々の画像に対して生成されるオブジェクトのプロパティ値を表示します。プロパティー名の表示無しです。|文字列|||showpropertyvalue=path;
showattribute|Show attribute value|イメージビューアの画像がTooltipクラスのエレメントから成る場合に、そのエレメントの属性値を表示します。属性名の表示無しです。|文字列|||showattributevalue=keywords;
イメージビューアのスライドショーに適用されるオプション:
オプション名|簡易表記|効果|タイプ|デフォルト値|相反するオプション|設定例
defaultslideshowinterval|Default slideshow interval|イメージビューアのスライドショーで使われます。次の画像へ移るまでの待ち時間(ms)のデフォルト値です。|数値|12000||defaultslideshowinterval=16000;
bPerformAutoRotation|Perform Auto-Rotate
|スライドコンテンツ(画像や動画)を回転したいときに使用します。
ページイメージビューア(スライドショー)で使われます。
スライドが表示されたときに回転するか否かを指定します。
autoRotationDegreeオプションとペアで使います。
回転値(90度または270度)はautoRotationDegreeオプションで指定します。
縦長のスライドをデスクトップPCやノートPCの横長ディスプレイの画面一杯に表示させる目的で追加したオプションです。
|真偽値|false||リストアイテムのオプションの場合はセミコロン区切りで、
bPerformAutoRotation=true;autoRotationDegree=90;
のように書きます。
dropMeのイメージビューアのオプションは(書いているこの時点では)アンド区切りで、
&bPerformAutoRotate=true&autoRotationDegree=90
のように書きます。
maxslideshowruns|Max slideshow runs|イメージビューアのスライドショーで使われます。
この数値を上回る回数のスライドショー処理が行われようとするとき、スライドショーを中止します。これにより延々とスライドショーが繰り返される事態を避けます。
|数値|1000||maxslideshowruns=300;
bShuffleSlides|Shuffle Slides|イメージビューアのスライドショーで使われます。スライドショー対象の画像、動画、またはオーディオなどをシャッフルしてからスライドショーを開始します。|真偽値|||bShuffleSlides=true;
bMuted|Muted|イメージビューアのスライドショーで使われます。スライドショー対象の動画、またはオーディオの音声ミュートを解除してからスライドショーを開始します。|真偽値|||bMuted=false;